<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/vue/vue.min.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/header.css">
</head>
<style>
    body {
        background-image: url("${pageContext.request.contextPath}/static/images/book3.jpg");
        /*content: url("/static/images/book3.jpg");*/
        background-position: left top, right bottom;
        /*background-repeat:no-repeat;*/
    }
</style>
<body class="img">
<div class="container header">
    <div>
        <button class="btn btn-warning" style="margin-left: 600px;"><a
                href="${pageContext.request.contextPath}/index.jsp"
                style="color: #861bbb">返回主页</a></button>
        <h1 style="text-align:center;font-family: 幼圆, sans-serif;color:#b22786;">用户注册</h1><br>
        <%--        <h1 id="aas">用户注册</h1>--%>
    </div>
    <div class="col-md-4 col-lg-4"></div>
    <div class="col-md-4 col-lg-4">
        <form action="#" method="post">
            <div class="form-group">
                <label for="a1">账号</label><input type="text" class="form-control" id="a1" autocomplete="off"
                                                 required="required" placeholder="请输入用户名"/>
            </div>
            <div class="form-group">
                <label for="a2">密码</label><input type="password" class="form-control" id="a2" autocomplete="off"
                                                 required="required" placeholder="请输入密码"/>
                <label for="a7">再次确认密码</label><input type="password" class="form-control" id="a7" autocomplete="off"
                                                     placeholder="请再次输入密码" required="required"/>
            </div>
            <div class="form-group">
                <label for="a6">邮箱</label><input class="form-control" type="text" id="a6" autocomplete="off"
                                                 pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
                                                 placeholder="请输入邮箱" required="required"/></p>
                <label for="a8">地址</label><input class="form-control" type="text" id="a8" autocomplete="off"
                                                 placeholder="请输入地址" required="required"/></p>
                <label for="a9">电话</label><input class="form-control" type="number" id="a9" autocomplete="off"
                                                 placeholder="请输入电话" required="required"/></p>
            </div>
            <div class="col-md-8">
                <div class="form-group">
                    <label for="a4">验证码</label><input type="text" class="form-control" id="a4" autocomplete="off"
                                                      required="required"/>
                </div>
            </div>
            <div class="col-md-4"><img style="margin-top: 30px" id="a5" src="${pageContext.request.contextPath}/captcha"
                                       width="60px;"/></div>
            <div class="col-md-12 divider"></div>
            <div id="hhh" class="col-md-4" style="color: #9c2f25"></div>
            <%--            <div id="v1" class="col-md-4" style="color: #9c2f25">{{msg}}</div>--%>
            <div class="col-md-8">
                <input class=" btn btn-primary" type="button" value="注册" id="a3" autocomplete="off"/>&nbsp&nbsp&nbsp
            </div>

        </form>
    </div>
</div>

</body>
<script>
    $("#a3").click(function () {
        if ($("#a1").val() == "" || $("#a2").val() == "" || $("#a4").val() == "") {
            $("#hhh").text("请输入数据");
            $("#hhh").css("color", "red");
        } else if ($("#a2").val() != $("#a7").val()) {
            $("#hhh").text("输入密码不一致");
            $("#a7").focus();
            $("#hhh").css("color", "red");
        } else {
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/register",
                data: {
                    userName: $("#a1").val(),
                    userPassword: $("#a2").val(),
                    userEmail: $("#a6").val(),
                    userAddress: $("#a8").val(),
                    userTelephonenumber: $("#a9").val(),
                    code: $("#a4").val()
                },
                dataType: "text",
                success: function (res) {
                    console.log(res);
                    if (res == 1) {
                        window.location = "${pageContext.request.contextPath}/touser";
                    } else {
                        $("#hhh").text(res);
                        $("#hhh").css("color", "red");
                    }
                },
                error: function (res1) {
                    console.log("aDD");
                }
            });
        }
    });
    $("#a5").click(function () {
        this.src = "${pageContext.request.contextPath}/captcha";
    });
</script>

</html>
